<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>房东管理</el-breadcrumb-item>
        <el-breadcrumb-item>房东列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
          <el-row :gutter="25">
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="输入用户名" v-model="queryParams.name" /> 
              </el-col>
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="输入电话" v-model="queryParams.phone" /> 
              </el-col>
              <el-col :span="3">
                  <el-button size="small" type="success" @click="queryPage" icon="el-icon-search"  v-if="permissionStrValue.indexOf('houseHost:query') !== -1">查询</el-button>
              </el-col>
          </el-row>

          <!--放表格-->
        <el-table :data="list" border stripe >
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="姓名">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="身份证">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.identifyId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="房源数量">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.data.count}}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.createTime}}</span>
                </template>
            </el-table-column>

            <!-- <el-table-column label="操作" width="250px">
                 <template slot-scope="scope">
                     <el-button type="primary" size="small" @click="updateById(scope.row.id)" icon="el-icon-edit">编辑</el-button>
                     <el-button type="danger" size="small" @click="removeById(scope.row.id)" icon="el-icon-delete">删除</el-button>
                 </template>
            </el-table-column> -->
        </el-table>

        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </el-card>

</div>
    
</template>
<script>
export default {
    name: 'HHouseHost',
    data() {
        return {
            queryParams: {
                name: '',
                phone: '',
                landlord: true,
                currPage: 1,
                pageSize: 10
            },
            list: [],
            total: 0,
            permissionStrValue: '',

        }
    },
    created() {
        this.queryPage()
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();

    },
    methods: {
        async queryPage() {
            const {data: res} = await this.$http.post('/user/member/get-landlord-infos',JSON.stringify(this.queryParams), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            });
           console.log(res)
            if(res.success) {
                this.list = res.data;
                this.total = res.total;
            } else {
                this.$message.error(res.message);
            }
        },
        handleSizeChange(newPageSize) {
            this.queryParams.pageSize = newPageSize;
            this.queryPage();
        },
        handleCurrentChange(newPage) {
            this.queryParams.currPage = newPage;
            this.queryPage();

        },

    }
}
</script>
<style scoped>

</style>